@mixin flex-d-w(
  $dir: column,
  $wrap: nowrap
){
  display: flex;
  flex-direction: $dir;
  flex-wrap: $wrap;
}
@mixin flex-c-n{
  @include flex-d-w($dir: column, $wrap: nowrap);
}
@mixin flex-r-n{
  @include flex-d-w($dir: row, $wrap: nowrap);
}
@mixin full-absolute{
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
@mixin background(
  $url,
  $repeat: no-repeat,
  $position: center,
  $size:cover
){
  background-image:url($url);
  background-repeat:$repeat;
  background-position:$position;
  background-size: $size;
}
@mixin after()
{
  content: '';
  display: block;
}

@mixin underline(
  $color:$BASE_COLOR_RED
){
  &::before{
    content: '';
    display: block;
    width:100%;
    height:3px;
    background: #fff;
    position: absolute;
    z-index:10;
    bottom:0;
    left:0;
    animation: navLineAnimationHover 0s ease 0.3s 1 forwards;
    -webkit-animation: navLineAnimationHover 0s ease 0.3s 1 forwards;
    -moz-animation: navLineAnimationHover 0s ease 0.3s 1 forwards;
    -ms-animation: navLineAnimationHover 0s ease 0.3s 1 forwards;
    -o-animation: navLineAnimationHover 0s ease 0.3s 1 forwards;
  }
  &::after{
    content: '';
    display: block;
    width:0;
    height:3px;
    background: $color;
    position: absolute;
    z-index:1;
    bottom:0;
    //left:0;
    animation: navLineAnimationAfter 0.3s ease 0s 1 forwards;
    -webkit-animation: navLineAnimationAfter 0.3s ease 0s 1 forwards;
    -moz-animation: navLineAnimationAfter 0.3s ease 0s 1 forwards;
    -ms-animation: navLineAnimationAfter 0.3s ease 0s 1 forwards;
    -o-animation: navLineAnimationAfter 0.3s ease 0s 1 forwards;
    @include transition(all 0.3s);
  }
  &:hover{
    color: $color;
    &::after{
      animation: navLineAnimationStart 0.3s ease 0s 1 forwards;
      -webkit-animation: navLineAnimationStart 0.3s ease 0s 1 forwards;
      -moz-animation: navLineAnimationStart 0.3s ease 0s 1 forwards;
      -ms-animation: navLineAnimationStart 0.3s ease 0s 1 forwards;
      -o-animation: navLineAnimationStart 0.3s ease 0s 1 forwards;
    }
  }
}


@mixin button(
  $text: #000,
  $textHover: #fff,
  $border: #000,
  $borderHover: $BASE_COLOR_RED,
  $background: transparent,
  $backgroundHover: $BASE_COLOR_RED,
  $width: 250px,
  $height: 44px,
  $padding: 0 15px,
  $lineHeight: 0,
  $borderWidth: 3px
){
  display: inline-block;
  height: $height;
  border:$border $borderWidth solid;
  color: $text;
  font-size:inherit;
  text-align: center;
  transition:all .3s;
  line-height:$height;
  position: relative;
  overflow: hidden;
  &>span:not(.iconfont){
    padding: $padding;
    box-sizing: border-box;
    display: block;
    width:100%;
    height: inherit;
    line-height: inherit;
    position: relative;
    z-index:3;
  }
  .iconfont{
    font-size:inherit;
  }
  a{
    display: block;
    color: inherit;
  }
  &::before{
    content: '';
    display: block;
    width:100%;
    height:$height;
    background: $background;
    position: absolute;
    z-index:2;
    bottom:0;
    left:0;
    animation: navLineAnimationHover 0s ease 0.3s 1 forwards;
    -webkit-animation: navLineAnimationHover 0s ease 0.3s 1 forwards;
    -moz-animation: navLineAnimationHover 0s ease 0.3s 1 forwards;
    -ms-animation: navLineAnimationHover 0s ease 0.3s 1 forwards;
    -o-animation: navLineAnimationHover 0s ease 0.3s 1 forwards;
  }
  &::after{
    content: '';
    display: block;
    width:0;
    height:$height;
    background: $backgroundHover;
    position: absolute;
    z-index:1;
    bottom:0;
    animation: navLineAnimationAfter 0.3s ease 0s 1 forwards;
    -webkit-animation: navLineAnimationAfter 0.3s ease 0s 1 forwards;
    -moz-animation: navLineAnimationAfter 0.3s ease 0s 1 forwards;
    -ms-animation: navLineAnimationAfter 0.3s ease 0s 1 forwards;
    -o-animation: navLineAnimationAfter 0.3s ease 0s 1 forwards;
    transition: all .3s;
  }
  &:hover{
    color: $textHover;
    border-color: $borderHover;
    &::after{
      animation: navLineAnimationStart 0.3s ease 0s 1 forwards;
      -webkit-animation: navLineAnimationStart 0.3s ease 0s 1 forwards;
      -moz-animation: navLineAnimationStart 0.3s ease 0s 1 forwards;
      -ms-animation: navLineAnimationStart 0.3s ease 0s 1 forwards;
      -o-animation: navLineAnimationStart 0.3s ease 0s 1 forwards;
    }
  }
}

@mixin niceScroll(){
  &::-webkit-scrollbar {
    width: 6px;
    background-color: rgba(200,200,200,0.5);
  }
  &::-webkit-scrollbar-thumb {
    background-color: rgba(200,200,200,0.8);
    border-radius: 6px;
  }
  &::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(217,217,217,0.3);
    background-color: #f1f1f1;
  }
}
